<template>
  <div class="workcalendar">
    <el-row :gutter="10">
      <el-col :span="12">
        <el-card>
          <div class="word">工作日历</div>
          <div class="rili">
            <el-row>
              <el-col>
                <el-select v-model="data" size="mini">
                  <el-option></el-option>
                </el-select>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-calendar v-model="value"></el-calendar>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div class="two">流程申请</div>
          <div class="btn">
            <el-button class="ban">加班离职</el-button>
            <el-button class="ban">请假调休</el-button>
            <el-button class="ban">审批列表</el-button>
            <el-button class="ban last">我的信息</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'workcalendar',
  data () {
    return {
      value: Date.now(),
      data: []
    }
  }
}
</script>

<style lang="scss">
.workcalendar {
  .rili {
    .el-calendar__header {
      display: none;
    }
    .el-input.el-input--mini.el-input--suffix {
      width: 86px;
      margin-top: 15px;
    }
    .el-calendar-table td{
        border:none
    }
  }
  .word,
  .two {
    font-size: 30px;
    font-weight: 700;
  }
  .word {
    height: 60px;
    line-height: 60px;
    border-bottom: 2px solid #ccc;
  }
  .two {
    width: 120px;
    height: 60px;
    line-height: 60px;
    border-bottom: 5px solid #8a97f8;
  }
  .btn {
    margin-top: 30px;
    .ban {
      width: 150px;
      height: 50px;
      margin-right: 32px;
      margin-left: 10px;
      line-height: 20px;
      border-radius: 5px;
      color: #938ca0;
    }
    .last {
      margin-top: 15px;
    }
  }
}
</style>
